/**
 * 此示例演示了如何使用jsdomJSDOMCrawler DOM 实现与网站进行交互。这里的脚本将从React 示例中打开一个计算器应用程序，单击并提取结果。1 + 1 =
 */
import { JSDOMCrawler, log } from 'crawlee';

// 创建 JSDOMCrawler 类的实例 - 自动爬虫
// 加载 URL 并使用 jsdom 库解析它们的 HTML。
const crawler = new JSDOMCrawler({
    // 将`runScripts`选项设置为`true`允许爬虫执行客户端
    // 页面上的 JavaScript 代码。这对于某些网站（例如本例中的 React 应用程序）是必需的，但可能会带来安全风险。
    runScripts: true,
    // 对于每个爬取的 URL 都会调用此函数。
    // 这里我们从选项中提取窗口对象，并使用它从页面中提取数据。
    requestHandler: async ({ window }) => {
        const { document } = window;
        // `document` 对象类似于您从最喜欢的网络浏览器中了解到的 `window.document` 对象。
        // 因此，您可以在此处使用常规的浏览器端 API。
        document.querySelectorAll('button')[12].click(); // 1
        document.querySelectorAll('button')[15].click(); // +
        document.querySelectorAll('button')[12].click(); // 1
        document.querySelectorAll('button')[18].click(); // =

        const result = document.querySelectorAll('.component-display')[0].childNodes[0] as Element;
        // 结果被传递到控制台。与 Playwright 或 Puppeteer 爬虫不同，
        // 此控制台调用将转到 Node.js 控制台，而不是浏览器控制台。这里的所有代码都在 Node.js 中运行！
        log.info(result.innerHTML); // 2
    },
});

// 运行爬虫并等待其完成。
await crawler.run(['https://ahfarmer.github.io/calculator/']);

log.debug('爬虫完成!');
